<template>
  <div class="product-show">

    <vxe-table
      size="mini"
      border
      stripe
      resizable
      row-id="id"
      :data="tableTreeData"
      :tree-config="{}"
      :checkbox-config="{labelField: 'name'}">
      <vxe-column type="checkbox"  title="人员名" width="400" tree-node></vxe-column>
      <vxe-column field="date" title="注册日期"></vxe-column>
      <vxe-column field="address" title="地址"></vxe-column>

      <vxe-column title="操作" fixed="right" width="200">
        <el-button type="text" size="small">操作1</el-button>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

export default {
  name: 'testTableTree',
  data(){
    return {
      tableTreeData:  [
        {
          "id": 1,
          "parentId":0,
          "date": "2016-05-02",
          "name": "王小虎1",
          "address": "上海市普陀区金沙江路 1518 弄"
        },
        {
          "id": 2,
          "parentId":0,
          "date": "2016-05-04",
          "name": "王小虎2",
          "address": "上海市普陀区金沙江路 1517 弄",
          "children": [
            {
              "id": 21,
              "parentId":2,
              "date": "2016-05-01",
              "name": "王小虎21",
              "address": "上海市普陀区金沙江路 1519 弄"
            },
            {
              "id": 22,
              "parentId":2,
              "date": "2016-05-01",
              "name": "王小虎22",
              "address": "上海市普陀区金沙江路 1519 弄"
            }
          ]
        },
        {
          "id": 3,
          "parentId":0,
          "date": "2016-05-01",
          "name": "王小虎3",
          "address": "上海市普陀区金沙江路 1519 弄",
          "children": [
            {
              "id": 31,
              "parentId":3,
              "date": "2016-05-01",
              "name": "王小虎31",
              "address": "上海市普陀区金沙江路 1519 弄",
              "children": [
                {
                  "id": 311,
                  "parentId":31,
                  "date": "2016-05-01",
                  "name": "王小虎311",
                  "address": "上海市普陀区金沙江路 1519 弄"
                },
                {
                  "id": 312,
                  "parentId":31,
                  "date": "2016-05-01",
                  "name": "王小虎312",
                  "address": "上海市普陀区金沙江路 1519 弄",
                  "children": [
                    {
                      "id": 3121,
                      "parentId":312,
                      "date": "2016-05-01",
                      "name": "王小虎3121",
                      "address": "上海市普陀区金沙江路 1519 弄"
                    },
                    {
                      "id": 3122,
                      "parentId":312,
                      "date": "2016-05-01",
                      "name": "王小虎3122",
                      "address": "上海市普陀区金沙江路 1519 弄"
                    }
                  ]
                },
                {
                  "id": 313,
                  "parentId":31,
                  "date": "2016-05-01",
                  "name": "王小虎313",
                  "address": "上海市普陀区金沙江路 1519 弄"
                },
              ]
            }
          ]
        },
        {
          "id": 4,
          "parentId":0,
          "date": "2016-05-03",
          "name": "王小虎4",
          "address": "上海市普陀区金沙江路 1516 弄"
        }
      ],
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style scoped>
</style>
